<template>
  <svg :width="svgWidth" :height="svgHeight" :viewBox="`0 0 ${svgWidth} ${svgHeight}`">
    <g :transform="`${margin.left},${margin.top}`" class="barChart">
      <!--<g class="x axis">-->
        <!--<g>-->
          <!---->
        <!--</g>-->
      <!--</g>-->
      <rect v-for="(item, index) in path"
            :x="item.x"
            :y="item.y"
            :width="item.width"
            :height="item.height"
            :fill="color[index]"
      ></rect>
    </g>
  </svg>
</template>
<script>
  import * as d3 from 'd3';

  export default {
    name: 'BarChart',
    props: {
      svgWidth: {
        type: Number,
        default: 500,
      },
      svgHeight: {
        type: Number,
        default: 300,
      },
      margin: {
        type: Object,
        default() {
          return {
            top: 20,
            right: 20,
            bottom: 0,
//            bottom: 30,
            left: 40,
          };
        },
      },
      dataset: {
        type: Array,
        default() {
          return [5, 10, 20, 45, 6, 25];
        },
      },
      opacity: {
        type: Number,
        default: 0.5,
      },
      bandSlot: {
        type: Number,
        default: 30,
      },
      color: {
        type: Array,
        default() {
          return ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
        },
      },
    },
    data() {
      return {
        width: this.svgWidth - this.margin.left - this.margin.right,
        height: this.svgHeight - this.margin.top - this.margin.bottom,
        settings: {
          strokeColor: '#29B5FF',
          width: 900,
          height: 500,
          parent: 100,
        },
      };
    },
    mounted() {
      console.log(this.$el);
//      this.init();
    },
    computed: {
      style() {
        return {
          width: this.settings.parent,
        };
      },
      path() {
        const rects = [];
        const dataset = this.dataset;
        const width = this.width;
        const bandwidth = width / dataset.length - this.bandSlot;
        dataset.forEach((d, i) => {
          const rect = {
            x: this.scaleX(i),
            y: this.scaleY(d),
            width: bandwidth,
            height: 500 - this.scaleY(d),
          };
          rects.push(rect);
        });
        return rects;
      },
    },
    methods: {
      scaleX(val) {
        const dataset = this.dataset;
        const width = this.width;
        const x = d3.scaleBand().range([0, width]);
        x.domain(dataset.map((d, i) => i));
        return x(val);
      },
      scaleY(val) {
        const dataset = this.dataset;
        const height = this.height;
        const y = d3.scaleLinear().range([height, 0]);
        y.domain([0, Math.max(...dataset)]);
        return y(val);
      },
      init() {
        const g = d3.select('.barChart');
        const axisX = d3.scaleLinear().domain([0, this.dataset.length - 1]).range([0, this.width]);
        const axisY = d3.scaleLinear().domain([0, Math.max(...this.dataset)]).range([this.height, 0]);
        g.append('g').attr('class', 'axis axis-x')
          .attr('transform', `translate(0,${this.height})`)
          .call(d3.axisBottom(axisX));
        g.append('g').call(d3.axisLeft(axisY));
      },
    },
  };
</script>
<style scoped>
    /* 本地样式 */
</style>
